import { Row, Col, Button, Icon, Steps } from 'antd';
import { AccessControl } from '../../utils/common';
import React, { Component } from 'react';
import Styles from './financeInfo.less';
import { Link } from 'dva/router';
import { connect } from 'dva';

const Step = Steps.Step;

class FinanceInfo extends Component{
  render () {
    const permissionList = this.props.permissions;

    return (
      <div className={Styles.financeInfo}>
        <Row gutter={10}>
          <Col span={9}>
            <div className={Styles.manageBalance}>
              <div className={Styles.topHead}>
                <img className={Styles.dspIcon} src="http://cowcdn.oss-cn-hangzhou.aliyuncs.com/dsp/img/dsp-icon.png" />
                <div className={Styles.money}>
                  <p>账户余额(元)：<span>{this.props.balance || '-'}</span></p>
                  <p>今日消耗(元)：<span>{this.props.consumeCurDay || '-'}</span></p>
                </div>
              </div>
                {
                  AccessControl(permissionList, 'dsp_advert_fund_recharge') ?
                    <div className={Styles.action}>
                      <Button ghost size="large" type="primary" className={Styles.balanceBtn}>
                        <Link to="/page/manageBalance">余额分配</Link>
                      </Button>
                    </div> : null
                }
            </div>
          </Col>
          <Col span={15}>
            <div className={Styles.payPath}>
              <p className={Styles.title}>账号充值流程</p>
                <div className={Styles.steps}>
                  <img src="http://cowcdn.oss-cn-hangzhou.aliyuncs.com/dsp/img/path-img.png" />
                </div>
                <div className={Styles.rechargeAction}>
                  <Button ghost type="primary" size="large" className={Styles.Recharge}>
                    <a href="http://wpa.qq.com/msgrd?v=3&uin=1346847911&site=qq&menu=yes" target="_blank">充值咨询</a>
                  </Button>
                </div>
            </div>
          </Col>
        </Row>
      </div>
    )
  }
}

export default connect((state) => {
  const { balance } = state.financeInfo;
  const { permissions } = state.indexPage;

  return {
    ...balance,
    permissions
  }
})(FinanceInfo)
